<template>
  <el-table
    v-loading="tableLoading"
    :data="damageNoticeTable"
    :default-sort="{prop: 'generatedDate', order: 'descending'}"
  >
    <el-table-column label="通知号" align="center">
      <template slot-scope="{row}">
        <span>{{ row.damageNoticeID }}</span>
      </template>
    </el-table-column>
    <el-table-column sortable prop="generatedDate" label="通知时间" align="center">
      <template slot-scope="{row}">
        <span>{{ toDateString(row.noticeDate) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="设施名" align="center">
      <template slot-scope="{row}">
        <span>{{ row.facilityName }}</span>
      </template>
    </el-table-column>
    <el-table-column label="损坏部位" align="center">
      <template slot-scope="{row}">
        <span>{{ row.damagePart }}</span>
      </template>
    </el-table-column>
    <el-table-column label="损坏原因" align="center">
      <template slot-scope="{row}">
        <span>{{ row.damageReason }}</span>
      </template>
    </el-table-column>
    <el-table-column label="审核状态" align="center">
      <template slot-scope="{row}">
        <el-tag :type="getStatusColor(row.auditStatus)">{{ convertStatus(row.auditStatus) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="审核意见" align="center">
      <template slot-scope="{row}">
        <span>{{ row.auditOpinion }}</span>
      </template>
    </el-table-column>
    <el-table-column min-width="120" fixed="right" label="操作" align="center">
      <template slot-scope="{row}">
        <DamageNoticeAudit
          :data="{damageNoticeID: row.damageNoticeID,auditStatus: row.auditStatus,auditOpinion:row.auditOpinion}"
          @submitSuccess="auditSuccess"
        />
        <el-popconfirm
          title="该操作不可逆确定删除？"
          @onConfirm="deleteNotice(row.damageNoticeID)"
        >
          <el-button slot="reference" size="small" type="danger" icon="el-icon-delete" circle />
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { mapGetters } from 'vuex'
import { searchDamageNotice } from '@/api/dailyInspection'
import { toDateString } from '@/utils/time-handle'
import DamageNoticeAudit from '@/views/daily-inspection/components/DamageNoticeAudit'
import { deleteDamageNotice } from '@/api/dailyInspection'

export default {
  name: 'DamageNoticeManager',
  components: { DamageNoticeAudit },
  data() {
    return {
      tableLoading: true,
      damageNoticeTable: []
    }
  },
  computed: {
    ...mapGetters([
      'departmentId',
      'superDepartmentId',
      'roles'
    ])
  },
  created() {
    this.getAllDamageNotice()
  },
  methods: {
    auditSuccess() {
      this.getAllDamageNotice()
    },
    deleteNotice(id) {
      deleteDamageNotice({ id }).then(() => {
        this.getAllDamageNotice()
        this.$message.success('删除成功')
        this.$notify.warning({
          title: '警告',
          message: '您刚刚删除了一条无法恢复的记录',
          duration: 0
        })
      })
    },
    toDateString,
    convertStatus(status) {
      switch (status) {
        case 0:
          return '未审核'
        case 1:
          return '已通过'
        case 2:
          return '未通过'
      }
    },
    getStatusColor(status) {
      switch (status) {
        case 0:
          return 'warning'
        case 1:
          return 'success'
        case 2:
          return 'danger'
      }
    },
    getAllDamageNotice() {
      let params = {
        departmentId: this.departmentId
      }
      if (this.roles[0] === '1') {
        params = {}
      }
      searchDamageNotice(params).then(data => {
        this.damageNoticeTable = data
        this.tableLoading = false
        this.$message.success('已刷新整修通知记录')
      })
    }
  }
}
</script>

<style scoped>

</style>
